<template>
  <div v-loading="loading">
    <el-row v-if="dat">
      <el-col :span="6" class="mb20">
        <p>电流</p>
        <p>{{(dat.a_i/10).toFixed(1)}}A</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>剩余电流</p>
        <p>{{dat.a_di}}mA</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>导线温度</p>
        <p>{{dat.a_t}}°C</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>电压</p>
        <p>{{dat.a_v/10}}V</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>瞬时功率</p>
        <p>{{dat.a_pw/10000}}kW</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>功率因素</p>
        <p>{{dat.a_ss/100}}</p>
      </el-col>
      <el-col :span="6" class="mb20">
        <p>电量</p>
        <p>{{dat.a_ww}}kW·h</p>
      </el-col>
    </el-row>
    <div v-else style="height:160px;text-align:center;">
      <img style="width:200px;" src="@/assets/nodata.png" alt="">
    </div>
  </div>
</template>

<script>
import{_equipmentShow} from "@/http/ajax";
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      dat: {
        a_i:0,
        a_di:0,
        a_t:0,
        a_v:0,
        a_ss:0,
        a_ww:0,
        a_pw:0
      }
    };
  },
  watch:{
    id(val){
      this.loading = true;
       this.getData(val)
    }
  },
  created() {this.checks()},
  methods: {
    domInit() {
      this.checks();
    },
    checks() {
      this.loading = true;
      setTimeout(() => {
        if (this.id) {
          this.getData(this.id)
        } else {
          this.checks();
        }
      }, 500);
    },
    getData(id_){
      _equipmentShow(id_,res=>{
        setTimeout(()=>{
          this.loading = false;
          this.dat = res.current
        },500)
      },err=>{})
    }
  }
};
</script>

<style lang="scss">
</style>
